<template>
  <div class="mb-8">
    <div class="border-b border-gray-200 bg-white text-center text-lg font-semibold">
      <ul class="-mb-px flex flex-wrap">
        <li class="mr-2 cursor-pointer" @click="changeIndex(1)">
          <a :class="activeIndex == 1 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4 text-red-500">
            今日涨停
            <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-red-500 text-sm font-semibold text-white">
              {{ up_num }}
            </span>
          </a>
        </li>
        <li class="mr-2 cursor-pointer" @click="changeIndex(6)">
          <a :class="activeIndex == 6 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4 text-green-600">
            炸板池
            <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-green-600 text-sm font-semibold text-white">
              {{ up_open_num }}
            </span>
          </a>
        </li>
        <li class="mr-2 cursor-pointer" @click="changeIndex(7)">
          <a :class="activeIndex == 7 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4 text-green-600">
            跌停池
            <span class="inline-flex h-6 w-6 items-center justify-center rounded-full bg-green-600 text-sm font-semibold text-white">
              {{ down_num }}
            </span>
          </a>
        </li>
        <li class="mr-2 cursor-pointer" @click="changeIndex(2)">
          <a :class="activeIndex == 2 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4">昨日涨停</a>
        </li>
        <li class="mr-2 cursor-pointer" @click="changeIndex(3)">
          <a :class="activeIndex == 3 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4">强势股</a>
        </li>
        <li class="mr-2 cursor-pointer" @click="changeIndex(4)">
          <a :class="activeIndex == 4 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4">新股池</a>
        </li>
        <li class="mr-2 cursor-pointer" @click="changeIndex(5)">
          <a :class="activeIndex == 5 ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 p-4">次新股</a>
        </li>
        <li class="px-2 py-4">
          <label class="relative mx-2 inline-flex cursor-pointer items-center">
            <input type="checkbox" value="" class="peer sr-only" checked v-model="checkableST" @change="filter()" />
            <div
              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-red-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-red-500"
            ></div>
            <span class="ml-3 text-sm font-semibold">过滤ST</span>
          </label>
        </li>
        <li class="px-2 py-4" v-if="activeIndex <= 2 || activeIndex == 6">
          <label class="relative mx-2 inline-flex cursor-pointer items-center">
            <input type="checkbox" value="" class="peer sr-only" checked v-model="checkableLimitUp" @change="filter()" />
            <div
              class="peer h-6 w-11 rounded-full bg-gray-200 after:absolute after:left-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-red-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-4 peer-focus:ring-red-500"
            ></div>
            <span class="ml-3 text-sm font-semibold">显示连板</span>
          </label>
        </li>
        <li class="px-2 py-4">
          <ul class="-mb-px flex flex-wrap">
            <li class="cursor-pointer" @click="filterPlate()">
              <a :class="!plateName ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 px-2">全部</a>
            </li>
            <template v-for="(item, i) in group" :key="item.name">
              <template v-if="item.value > 1">
                <li class="cursor-pointer" @click="filterPlate(item.name)">
                  <a :class="plateName == item.name ? 'border-b-red-500' : 'border-transparent'" class="inline-block rounded-t-lg border-b-2 px-4">
                    {{ item.name }}
                    <span class="rounded bg-red-500 px-2.5 py-0.5 text-sm font-semibold text-white">
                      {{ item.value }}
                    </span>
                  </a>
                </li>
              </template>
            </template>
          </ul>
        </li>
      </ul>
    </div>

    <table class="my-2 w-full bg-white text-right">
      <!-- head -->
      <thead class="border-b text-lg">
        <tr>
          <th scope="col" class="px-4 py-2 text-center">NO.</th>
          <th scope="col" class="px-4 py-2 text-left">股票</th>
          <th scope="col" class="px-4 py-2">价格</th>
          <th scope="col" class="px-4 py-2" :class="sortName == 'change_percent' ? 'bg-gray-200' : ''">
            <div class="flex cursor-pointer items-center justify-end" @click="sortby('change_percent')">
              涨幅
              <a>
                <svg class="ml-1.5 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                  <path
                    d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"
                  />
                </svg>
              </a>
            </div>
          </th>
          <th scope="col" class="whitespace-nowrap px-4 py-2">换手率</th>
          <th scope="col" class="whitespace-nowrap px-4 py-2">流通市值</th>
          <th scope="col" class="px-4 py-2 text-left" v-if="activeIndex <= 3 || activeIndex == 6">理由分析</th>
          <template v-if="activeIndex == 1 || activeIndex == 2 || activeIndex == 6">
            <th scope="col" class="whitespace-nowrap px-4 py-2">首次封板</th>
            <th scope="col" class="whitespace-nowrap px-4 py-2" :class="sortName == 'last_limit_up' ? 'bg-gray-200' : ''">
              <div class="flex cursor-pointer items-center justify-end" @click="sortby('last_limit_up')">
                最后封板
                <a>
                  <svg class="ml-1.5 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                    <path
                      d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"
                    />
                  </svg>
                </a>
              </div>
            </th>
            <th scope="col" class="whitespace-nowrap px-4 py-2">开板</th>
          </template>
          <th scope="col" class="whitespace-nowrap px-4 py-2" v-if="activeIndex <= 3 || activeIndex == 6">连板</th>
          <th scope="col" class="px-4 py-2" v-if="activeIndex == 4 || activeIndex == 5" :class="sortName == 'listed_date' ? 'bg-gray-200' : ''">
            <div class="flex cursor-pointer items-center justify-end" @click="sortby('listed_date')">
              上市日期
              <a>
                <svg class="ml-1.5 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
                  <path
                    d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"
                  />
                </svg>
              </a>
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, i) in list" :key="item.symbol" class="border-b">
          <td class="whitespace-nowrap px-4 py-2 text-center font-semibold">
            {{ list.length - i }}
          </td>
          <td class="whitespace-nowrap px-4 py-2 text-left">
            <Stock
              :symbol="item.symbol"
              type="zhangting"
              :name="item.stock_chi_name"
              :desc="item.m_days_n_boards_days && item.m_days_n_boards_boards ? item.m_days_n_boards_days + '天' + item.m_days_n_boards_boards + '板' : ''"
            ></Stock>
          </td>
          <td class="whitespace-nowrap px-4 py-2 font-semibold" :class="item.change_percent > 0 ? 'text-red-500' : 'text-green-600'">
            {{ item.price.toFixed(2) }}
          </td>
          <td class="whitespace-nowrap px-4 py-2">
            <ChangePercent :percent="item.change_percent"></ChangePercent>
          </td>
          <td class="whitespace-nowrap px-4 py-2 font-semibold">{{ (item.turnover_ratio * 100).toFixed(2) }}%</td>
          <td class="whitespace-nowrap px-4 py-2 font-semibold">
            {{ Utils.bigNumberTransform(item.non_restricted_capital, 'type') }}
          </td>
          <td class="whitespace-wrap cursor-pointer px-4 py-2 text-left" v-if="activeIndex <= 3 || activeIndex == 6">
            <template v-if="item.surge_reason != null">
              <template v-for="(plate, key) in item.surge_reason.related_plates" :key="key">
                <span @click="Utils.forwordBk(plate.plate_id)" class="mr-1 text-lg text-blue-600">{{ plate.plate_name }} |</span>
                <span v-if="plate.plate_reason">
                  {{ plate.plate_reason }}
                  <br />
                </span>
              </template>
              {{ item.surge_reason.stock_reason }}
            </template>
          </td>
          <template v-if="activeIndex == 1 || activeIndex == 2 || activeIndex == 6">
            <td class="whitespace-nowrap px-4 py-2">
              {{ Utils.formatDateTime(item.first_limit_up) }}
            </td>
            <td class="whitespace-nowrap px-4 py-2">
              {{ Utils.formatDateTime(item.last_limit_up) }}
            </td>
            <td class="whitespace-nowrap px-4 py-2" :class="item.break_limit_up_times > 0 ? 'font-semibold text-red-500' : ''">
              {{ item.break_limit_up_times || '-' }}
            </td>
          </template>
          <template v-if="activeIndex <= 3 || activeIndex == 6">
            <td class="whitespace-nowrap px-4 py-2">
              <span v-if="!item.limit_up_days">-</span>
              <span v-else-if="item.limit_up_days == 1">首板</span>
              <span v-else class="text-red-500">
                {{ item.limit_up_days + '连板' }}
              </span>
            </td>
          </template>
          <td class="whitespace-nowrap px-4 py-2" v-if="activeIndex == 4 || activeIndex == 5">
            {{ Utils.formatDate(item.listed_date) }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
import axios from 'axios';
import Utils from '../utils/index';
import { ref } from 'vue';

const list = ref([]);
const checkableST = ref(true);
const checkableLimitUp = ref(false);
let result = [];
const activeIndex = ref(1);
const sortName = ref('last_limit_up');
const plateName = ref('');
function changeIndex(index) {
  if (activeIndex.value != index) {
    activeIndex.value = index;
    if (activeIndex.value == 1) {
      sortName.value = 'last_limit_up';
    } else if (activeIndex.value == 2) {
      sortName.value = 'limit_up_days';
    } else {
      sortName.value = 'change_percent';
    }
    list.value = [];
    result = [];
    fetchData();
  }
}
function sortby(sort) {
  if (sortName.value != sort) {
    sortName.value = sort;
    list.value = list.value.sort(Utils.compare(sort));
  }
}
const up_num = ref(0);
const up_open_num = ref(0);
const down_num = ref(0);
function fetchData() {
  up_num.value = window.localStorage.getItem('up_num');
  up_open_num.value = window.localStorage.getItem('up_open_num');
  down_num.value = window.localStorage.getItem('down_num');

  let url = 'https://flash-api.xuangubao.cn/api/pool/detail?pool_name=';
  if (activeIndex.value == 1) {
    url += 'limit_up';
  } else if (activeIndex.value == 2) {
    url += 'yesterday_limit_up';
  } else if (activeIndex.value == 3) {
    url += 'super_stock';
  } else if (activeIndex.value == 4) {
    url += 'new_stock';
  } else if (activeIndex.value == 5) {
    url += 'nearly_new';
  } else if (activeIndex.value == 6) {
    url += 'limit_up_broken';
  } else if (activeIndex.value == 7) {
    url += 'limit_down';
  }
  axios.get(url).then(function (res) {
    result = res.data.data;
    if (result.length > 0) {
      result = result.sort(Utils.compare(sortName.value));
      list.value = result;
      //按板块分组
      groupPlate();
      if (plateName.value) {
        //先过滤plate数据
        filterPlate(plateName.value);
      } else {
        //过滤st
        filter();
      }
    }
  });
}
const group = ref({});
function groupPlate() {
  //过滤没有板块的
  let arr = [];
  result.forEach((e) => {
    if (e.surge_reason) {
      let plates = e.surge_reason.related_plates;
      for (let i = 0; i < plates.length; i++) {
        let name = plates[i].plate_name;
        let obj = arr.find((f) => {
          return f.name == name;
        });
        if (obj) {
          obj.value++;
        } else {
          arr.push({ name: name, value: 1 });
        }
      }
    }
  });
  group.value = arr.sort(Utils.compare('value'));
}
function filterPlate(name) {
  plateName.value = name;
  filter();
  if (name) {
    list.value = list.value.filter((e) => {
      if (e.surge_reason) {
        let plates = e.surge_reason.related_plates;
        return plates.find((f) => f.plate_name == name);
      }
    });
  }
}
function filter() {
  // console.log(checkableST.value)
  list.value = result;
  if (checkableST.value) {
    list.value = list.value.filter((e) => e.stock_type != 1);
  }
  if (checkableLimitUp.value) {
    list.value = list.value.filter((e) => e.limit_up_days && e.limit_up_days > 1);
  }
}

defineExpose({
  fetchData,
});
</script>
